.state,
a {
  position: relative;
  cursor: pointer;

  &:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    box-shadow: 0 0 0 (1*@rem) @state-cover-active-color;
    transform: scale(@state-scale-from);
    .transition-fast();
    pointer-events: none;
  }

  &.circle:after {.circle()}
  &.rounded:after {.rounded()}

  &:hover,
  &.hover {
    &:after {
      box-shadow: 0 0 0 (1*@rem) @state-cover-hover-color;
      background-color: @state-cover-hover-color;
      opacity: @state-cover-hover-opacity;
      transform: scale(1);
    }
  }

  &.focus,
  &:focus {
    outline: none;
    &:after {
      box-shadow: inset 0 0 0 (1*@rem) fade(@color-focus, 40%), 0 0 0 (2*@rem) fade(@color-focus, 40%);
      background-color: @state-cover-focus-color;
      transform: scale(1);
      opacity: @state-cover-focus-opacity;
    }
  }

  .open > &,
  &.open,
  &.active,
  &:active {
    &:after {
      box-shadow: none;
      background-color: @state-cover-hover-color;
      opacity: @state-cover-hover-opacity;
      transform: scale(1);
    }
  }

  &:active {
    &:after {
      box-shadow: inset 0 0 0 (1*@rem) fade(@color-focus, 20%), 0 0 0 (2*@rem) fade(@color-focus, 20%);
      background-color: @state-cover-active-color;
      transform: scale(@state-active-scale);
    }
  }

  &.disabled,
  &[disabled] {
    &:after {display: none!important}
  }
}

.state-click-throuth {
  &:after {
    pointer-events: none;
  }
}

.disabled,
.disabled > a,
[disabled] {
  cursor: not-allowed!important;
  pointer-events: none!important;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: @state-disabled-opacity!important;
  box-shadow: none!important;
}

.as-load-indicator {
  color: transparent!important;

  > * {visibility: hidden;}

  &:before {
    .spin();
    display: block;
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: (-9*@rem);
    margin-left: (-9*@rem);
    border: (3*@rem) dotted rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1) rgba(255,255,255,.4) rgba(255,255,255,.5) rgba(255,255,255,.6);
    width: (18*@rem);
    height: (18*@rem);
    border-radius: 50%;
    .transition-fast(opacity);
  }

  &.loading-light:before {
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.2) rgba(0,0,0,.3) rgba(0,0,0,.4);
  }
}

.as-load-indicator {
  &:before {
    opacity: 0;
    animation: none;
  }

  &.loading:before {
    opacity: 1;
    .spin();
  }
}

.load-indicator {
  &:before,&:after {
    text-align: center;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    color: @color-gray;
    transition: .2s @animation-type;
    transition-property: visibility, opacity;
    z-index: 1050;
  }
  &:before {
    content: attr(data-loading);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
    font-size: 12px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.65);
    z-index: 10;

  }
  &:after {
    .mdi;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    content: @mdi-loading;
    animation: spin 2s infinite linear;
    font-size: 24px;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -15px;
    z-index: 11;
    z-index: 1051;
  }

  &.loading {
    &:before,&:after {
      visibility: visible;
      opacity: 1;
    }
  }
}
